<template>
  <!-- 导航面包屑数据 反应的是路由路径  -->
  <el-breadcrumb
      class="app-breadcrumb"
      separator="/"
  >
    <!--  切换动画  -->
    <transition-group name="breadcrumb">
      <el-breadcrumb-item
          v-for="(item,index) in levelList"
          :key="item.path + item.name"
      >
        <!--   当无重定向路径或者是当前正在展示的路由 无需点击 只需标题显示     -->
        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
        <!--  有重定向路径或者非当前正在展示的路由 点击可以快速回到对应路由      -->
        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
export default {
  name:'BreadCrumb',
  components:{

  },
  data() {
    return {
      levelList: null
    }
  },
  watch: {
    $route(route) {
      console.log('面包屑组件监听路由变化， 当前路由：', route)
      // if you go to the redirect page, do not update the breadcrumbs
      if (route.path.startsWith('/redirect/')) {
        return
      }
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    /**
     * 获取所有父路由记录以及子路由记录
     */
    getBreadcrumb() {
      // only show routes with meta.title
      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      console.log('获取面包屑数据matched:', matched)

      if (matched.length > 0) {
        const first = matched[0]
        if (!this.isDashboard(first)) {
          // 当前展示路由是否为首页
          matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
        }

        const last = matched[matched.length - 1]
        if (this.isDashboard(last)) {
          // 当最后一个路由记录也为首页 移除最后一个元素
          matched.splice(-1)
        }
      }

      // 当为子菜单时 找到父级菜单名称（子菜单肯定是多个 单个直接显示在菜单项上）
      const dataSources = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
      const arr = []
      dataSources.forEach(item => {
        arr.push(item)
      })

      this.levelList = arr
      console.log('面包屑层级数据：', this.levelList)
    },

    /**
     * 是否为菜单首页 也就是栈顶页面
     * @param route
     * @returns {boolean}
     */
    isDashboard(route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      // 是否为菜单首页
      return name.trim() === 'Main' || name.trim() === 'Index'
    },

    /**
     * 面包屑点击事件
     * @param item
     */
    handleLink(item) {
      const { redirect, path } = item
      if (redirect) {
        this.$router.push(redirect)
        return
      }
      this.$router.push(path)
    }
  }
}
</script>

<style scoped>
.app-breadcrumb,.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 60px;
  margin-left: 8px;
}

.no-redirect {
  color: #97a8be;
  cursor: text;
}
</style>
